Se trata de una etiqueta de metadatos, por lo cual siempre debe estar ubicada en el head de la página; esta etiqueta consta de varios usos, entre los cuales uno de los principales es contener los llamados de archivos CSS. Al usarse de esta forma es necesario que se acompañe de dos de sus atributos con un valor en particular:
- rel="stylesheet": Indica que se trata de la hoja de estilos del documento.
- href=: Como siempre, este debe contener la ruta al archivo CSS en cuestión.
Dependiendo de la versión del lenguaje que se maneje también puede ir acompañado de otros atributos complementarios como, por ejemplo, type="text/css".
Definir iconos personalizados para la página web
Para enriquecer el diseño de la web se usan los iconos personalizados, los cuales se usan en diversos contextos.
El más común de estos es el fav.icon; consiste en un icono predefinido que se mostrará en la parte del navegador que contiene las pestañas abiertas, y también se visualizará al guardar la página como favoritos.
Para implementarlo se necesita guardar la imagen icono en el directorio del proyecto y añadir el siguiente código al "head". Un caso de uso real es crear varios "fav.ico", para que se apliquen uno u otro dependiendo del dispositivo desde el cual se visite el sitio.
Nota: Actualmente los navegadores aguantan formatos como png o incluso gif; sin embargo, el formato .ico garantiza funcionar incluso en versiones desactualizadas.
Nota: Si tu sitio web utiliza una política de seguridad de contenido (content security policy o CSP) para mejorar la seguridad, la política afecta al favicon. Si te encuentras con problemas como que el favicon no se carga, comprueba que la respuesta a Content-Security-Policy del header para la directriz img-src (en-US) en la cabecera no impide el acceso a este.